<template>
    <div> <!-- 顶部导航栏 开始 -->

        <div class="header">
            <van-nav-bar title="储值金" left-arrow @click-left="back" />
        </div>
        <!-- <div class="searchBox">
            <div @click='back' class="backBtn">
                <img class='backIcon' src="../../assets/greater.png" alt>
            </div>
            <div class="navTit">储值金</div>
            <div></div>
        </div> -->
        <div class="mainBox">
            <img src="../../assets/recharge/indexTop.png" class="topImg" alt="">
            <div class="titleCon">
                <span>巅峰让利</span>
                <span>钜惠到底</span>
            </div>

            <!-- <div class="shareBtn" >邀请好友</div> -->

            <!-- <div class="timeCon">
                活动时间：2024.06.31-2028.2.28
            </div> -->
            <div class="shareBtnBox">
                <img src="../../assets/active/shareBtn.png" @click="shareHandle" class="shareBtnImg" alt="">
                <img src="../../assets/active/shareActive.png" @click="toActive" class="shareBtnImg" alt="">
            </div>

            <div class="userInfoBox">
                <div class="userMain">
                    <img :src="alPath + 'zhonghui/user/' + user.userImg" alt="">
                    <div>
                        <span>{{ user.userName }}</span>
                        <img src="../../assets/recharge/vip1.png"
                            v-if="userStored.vipGrade == null || userStored.vipGrade == 0" alt="">
                        <img src="../../assets/recharge/vip2.png" v-if="userStored.vipGrade == 1" alt="">
                        <img src="../../assets/recharge/vip3.png" v-if="userStored.vipGrade == 2" alt="">
                        <img src="../../assets/recharge/vip4.png" v-if="userStored.vipGrade == 3" alt="">
                        <img src="../../assets/recharge/vip5.png" v-if="userStored.vipGrade == 4" alt="">
                        <div class="infoLine">
                            <div>
                                <div :style="{ width: perent + '%' }"></div>
                                <div class="vipItem1 vipItem">
                                    <span>2500</span>
                                    <span>白银会员</span>
                                </div>
                                <div class="vipItem2 vipItem">
                                    <span>5000</span>
                                    <span>黄金会员</span>
                                </div>
                                <div class="vipItem3 vipItem">
                                    <span>10000</span>
                                    <span>铂金会员</span>
                                </div>
                            </div>
                            <span>{{ userStored.totalStored || 0 }} / {{ totalNum }}
                            </span>
                        </div>
                    </div>
                    <img src="../../assets/active/infoRight.png" class="infoRight" alt="">
                </div>
                <div class="infoBox">
                    <div>
                        <span>储值余额</span>
                        <span>{{ userStored.residueMoney || 0 }}</span>
                        <span @click="toDetail(1)">查看储值记录</span>
                    </div>
                    <div>
                        <span>邀请返利</span>
                        <span>{{ userStored.shareCommission || 0 }}</span>
                        <span>
                            <span @click="tiHand(2)" class="detailBtn" v-if="userStored.shareCommission">提现</span>
                            <span @click="toDetail(2)">详情</span>
                        </span>
                    </div>
                    <!-- <div>
                        <span>充值返利</span>
                        <span>{{userStored.mineCommission||0}}</span>
                        <span>
                            <span @click="tiHand(3)" class="detailBtn" v-if="userStored.mineCommission">提现</span>
                            <span @click="toDetail(3)">详情</span>
                    </div> -->
                    <div>
                        <span>累计消费</span>
                        <span>{{ userStored.totalStored - userStored.residueMoney }}</span>
                        <span @click="toDetail(4)">查看消费记录</span>
                    </div>
                </div>
            </div>


            <div class="listMain">

                <div class="innerBox">
                    <template v-if="moneyList.length != 0">
                        <img src="../../assets/recharge/listTop.png" class="listTopImg" alt="">
                        <div class="innerCon">
                            <div class="itemBox" @click="selectMoney(item)" v-for="(item, index) in moneyList"
                                :key="index">
                                <div>{{ item.storedMoney }}</div>
                                <div>{{ item.storedMine }}%</div>
                                <img class="chongImg" src="../../assets/recharge/chongBtn.png" alt="">
                            </div>
                        </div>
                        <img src="../../assets/recharge/listBottom.png" class="listBottomImg" alt="">
                    </template>
                    <img v-else src="../../assets/recharge/wait.png" class="waitImg" alt="">
                </div>

                <div class="rulesBox" v-html="rules" v-if="rules != ''"></div>

            </div>
        </div>
        <!-- 主体区域 -->



    </div>

</template>

<script>

import { listMain, userPay, updateDistributionRecord } from '../../network/recharge'
import { getRuleList } from '../../network/active'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            rules: '',
            moneyList: [],//充值金额
            ruleMoney: 0,//充值金额
            returnMoney: 0,//返利比例

            tiShow: false,
            commissionSum: 0,
            getRealMoney: 0,
            userStored: '',//我的账户信息

            tiFlag: 0,//   2 邀请返利  3 充值返利
            // user: '',
            user: JSON.parse(localStorage.user),

            totalNum: 0,//当前等级进度条总值
            perent: 0,//百分比

        }
    },
    mounted() {

    },
    methods: {
        getRule() {
            getRuleList().then(res => {
                if (res.flag) {
                    res.data.forEach(ele => {
                        if (ele.ruleFlag == 0) {
                            this.rules = ele.ruleContent
                        }
                    })
                }
            })

        },

        shareHandle() {
            shareHref();
        },

        toDetail(flag) {
            console.log(flag);
            localStorage.rechargeFlag = flag
            this.$router.push('/rechargeHistory')
        },
        toActive() {
            // 分享海报抽奖活动
            this.$router.push('/shareActive')
        },
        subHandle() {
            this.tiShow = false
            authLogin('weixin');
        },
        selectMoney(money) {
            this.payHandle(money)
        },
        getData() {

            listMain({
                userId: localStorage.userId,
                shopId: localStorage.shopId
            }).then(res => {
                if (res.flag) {
                    if (res.data.storedList.length != 0) {
                        this.moneyList = []
                        res.data.storedList.forEach(ele => {
                            this.moneyList.push(ele)
                        });
                        console.log(this.moneyList);
                    }


                    this.userStored = res.data.userStored



                    this.totalNum = 10000
                    // 获取当前百分比
                    this.perent = ((this.userStored.totalStored / this.totalNum) * 100)
                    this.perent = this.perent > 100 ? 100 : this.perent
                }
            })

        },
        back() {
            this.$router.go(-1)
        },
        // 提现
        tiHand(flag) {
            this.$toast('功能暂未开放')
            return
            this.commissionSum = flag == 2 ? userStored.shareCommission : userStored.mineCommission
            this.getRealMoney = ((this.commissionSum) * 0.95).toFixed(2)
            this.tiFlag = flag
            // this.tiShow = true
            authLogin('weixin');
        },
        payHandle(storage) {
            console.log(JSON.stringify(storage));

            console.log(storage);

            userPay({
                userId: localStorage.userId,
                shopId: localStorage.shopId,
                shareId: this.user.referrerId || 0,
                storedMoney: storage.storedMoney,
                rebate: storage.storedMine,
                shareRebate: storage.storedShare,
                flag: 0,
                openId: 0,
                ifDown: this.user.referrerId ? 1 : 0
            }).then(res => {
                if (res.flag) {
                    this.paySuccess(res)
                } else {
                    this.payError()
                }
            })
        },

        //获取微信支付参数成功的回调函数
        paySuccess: function (resObj) {
            console.log(resObj);
            var str = JSON.stringify(resObj.data.finalPackage);
            console.log(str);
            var that = this;
            //用返回参数 发起微信支付请求 
            plus.payment.request(wxChannel, str, function (data) {
                plus.ui.alert("支付成功!", function () {
                    that.getData()
                    that.$toast('支付成功')
                })
            }, function (error) {
                console.log(JSON.stringify(error));
                that.$toast("支付失败");
            });
        },
        
        //获取微信支付参数失败的回调函数
        payError: function (e) {
            console.log(JSON.stringify(e));
            this.$toast("获取参数失败，请重试");
        },


        tixianHandle() {
            console.log(JSON.stringify(this.selectObj));
            console.log(localStorage.user);
            console.log(openId);
            this.isMask = true
            var that = this

            updateDistributionRecord({
                drId: that.selectObj.drId,
                totalStored: that.commissionSum,
                userId: localStorage.userId,
                userName: that.user.userName,
                openId: openId,
            }).then(res => {

                if (res.flag) {
                    console.log(res);
                    console.log(res.data);
                    console.log(res.data.datas);
                    res.data.datas = JSON.parse(res.data.datas)
                    console.log(res.data.datas.batch_id);
                    if (!res.data.datas.batch_id) {
                        that.$toast({
                            message: '提现失败',
                            position: 'bottom',
                        })
                        return
                    } else {
                        that.$toast({
                            message: '提现成功,预计3~5分钟内到账',
                            position: 'bottom',
                        })

                        that.getData();
                    }
                } else {
                    that.$toast({
                        message: '提现失败,请联系客服',
                        position: 'bottom',
                    })
                }

            })


        },



    },
    created() {
        this.getData()
        this.getRule()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

var shares = null,
    share_img = '../../assets/active/shareRecharge.jpg',
    content = '储值返利，推荐返利，5折购物',
    sharehrefTitle = '会员储值有礼',
    sharehref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cf9f21ba0cbf62b&redirect_uri=https://www.ccclkj.cn/sharePage/ZTYXApp/appInto.html';
var Intent = null,
    File = null,
    Uri = null,
    main = null;
// H5 plus事件处理
function plusReady() {
    updateSerivces();
    if (plus.os.name == "Android") {
        main = plus.android.runtimeMainActivity();
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
    }
}
if (window.plus) {
    plusReady();
} else {
    document.addEventListener("plusready", plusReady, false);
}
/**
 * 
 * 更新分享服务
 */
function updateSerivces() {
    plus.share.getServices(function (s) {
        shares = {};
        for (var i in s) {
            var t = s[i];
            shares[t.id] = t;
        }
    }, function (e) {
        mui.toast("获取分享服务列表失败：" + e.message);
    });
}
/**
 * 分享操作
 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
 * @param {Boolean} bh 是否分享链接
 */
function shareAction(sb, bh) {
    if (!sb || !sb.s) {
        mui.toast("无效的分享服务！");
        return;
    }
    var msg = {
        content: content,
        extra: {
            scene: sb.x,
            current_id: localStorage.userId,
        }
    };
    if (bh) {
        var state = "0" + "@" + localStorage.shopId + "@" + localStorage.userId + "@3";
        msg.href = sharehref + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";

        msg.title = sharehrefTitle;

        msg.content = content;
        msg.thumbs = ['../../assets/active/shareRecharge.jpg'];
        msg.pictures = ["_www/logo.png"];
    } else {
        mui.toast("取消分享");
        if (pic && pic.realUrl) {
            msg.pictures = [pic.realUrl];
        }
    }
    // 发送分享
    if (sb.s.authenticated) {
        shareMessage(msg, sb.s);
    } else {
        mui.toast("未授权");
        sb.s.authorize(function () {
            shareMessage(msg, sb.s);
        }, function (e) {
            mui.toast("认证授权失败");
            //alert("认证授权失败："+e.code+" - "+e.message );

        });
    }
}
/**
 * 发送分享消息
 * @param {JSON} msg
 * @param {plus.share.ShareService} s
 */
function shareMessage(msg, s) {
    s.send(msg, function () {
        mui.toast("分享到\"" + s.description + "\"成功！ ");
    }, function (e) {
        mui.toast("分享到\"" + s.description + "\"失败: ");
    });
}


// 分析链接
function shareHref() {
    console.log(share_img);
    var shareBts = [];
    // 更新分享列表
    var ss = shares['weixin'];
    ss && ss.nativeClient && (shareBts.push({
        title: '微信朋友圈',
        s: ss,
        x: 'WXSceneTimeline'
    }),
        shareBts.push({
            title: '微信好友',
            s: ss,
            x: 'WXSceneSession'
        }));
    // 弹出分享列表
    shareBts.length > 0 ? plus.nativeUI.actionSheet({
        title: '分享',
        cancel: '取消',
        buttons: shareBts
    }, function (e) {
        if (e.index == 0) {
            mui.toast("您已取消了分享哟~");
        }
        (e.index > 0) && shareAction(shareBts[e.index - 1], true);
    }) : plus.nativeUI.alert('当前环境无法支持分享链接操作!');
}


</script>

<style lang='less' scoped>
.backBtn {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.backIcon {
    font-size: 39.9975px;
    width: 36px;
    height: 36px;
}

.searchBox {
    position: fixed;
    top: 0;
    margin: 0 auto;
    padding-top: 63.9975px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 .9975px 6px #ccc;
}

.navTit {
    margin-left: -60px;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mainBox {
    position: relative;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    margin: 0px auto 0;
    width: 750px;
    background: #A5000A;

}

.mainBoxTab {
    margin-top: 0rem !important;
}

.shareBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 219.9975px;
    right: 50.0025px;
    width: 135.9975px;
    height: 48px;
    /* background: #F2E4C9; */
    box-shadow: 0px 2.0025px 8.0025px 0px rgba(119, 152, 255, 0.18);
    border-radius: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32.0025px;
    color: #FFFFFF;
    text-decoration: underline;

}

.topImg {
    width: 750px;
    height: 288px;
}


.titleCon {
    margin-top: -24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 468px;
    height: 51px;
    border: 2.0025px solid #F2E4C9;
    font-family: Source Han Sans CN;
    font-weight: 300;
    font-size: 36px;
    color: #F1DDBF;
    line-height: 50.0025px;
}

.titleCon>span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1;

}

.titleCon>span:last-child {
    background-color: #F2E4C9;
    color: #9B0021;
}

.timeCon {
    margin: 36px 0 0;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 20.0025px;

}


.listMain {
    box-sizing: border-box;
    padding: 50.0025px 45.9975px;
    width: 633.9975px;
    /* background: linear-gradient(-90deg, #EAB883, #F2E6CC, #EAB783); */
    border-radius: 39.9975px;
    border: 3.9975px solid #EBBE8E;
}

.innerBox {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.listTopImg {
    width: 100%;
    height: 213.9975px;
}

.listBottomImg {
    position: relative;
    top: -20.0025px;
    width: 100%;
    height: 56.0025px;
}

.innerCon {
    padding-bottom: 20.0025px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -20.0025px;
    width: 100%;
    min-height: 200.0025px;
    background-image: url(../../assets/recharge/listCon.png);
    background-size: 100% 100%;
}


.itemBox {
    position: relative;
    margin-top: 39.9975px;
    width: 489.9975px;
    height: 186px;
    background-image: url(../../assets/recharge/item.png);
    background-size: 100% 100%;
}

.itemBox>div {
    position: relative;
    top: 32.0025px;
    left: 126px;
    width: 100%;
    font-family: fox;
    font-weight: 800;
    font-size: 44.0025px;
    color: #FFFFFF;
    text-shadow: 0px 12.9975px 8.0025px rgba(216, 82, 41, 0.63);
    background: linear-gradient(-6deg, #F5C24D 0%, #FFDE8B 0%, #FBF2E0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.itemBox>div:nth-child(2) {
    top: 38.0025px !important;
}

.chongImg {
    position: absolute;
    right: 30px;
    top: 39.9975px;
    width: 92.0025px;
    height: 92.0025px;
    animation: round_animate 1s linear infinite;
    -webkit-animation: round_animate 1s linear infinite;
}

.userInfoBox {
    display: flex;
    flex-direction: column;
    /*align-items: center;
    justify-content: space-between;
    */
    margin: 33.9975px 0 36px;
    width: 702px;
    border-radius: 20.0025px;
    border: 3.9975px solid #EBBE8E;
    -webkit-border-radius: 20.0025px;
    -moz-border-radius: 20.0025px;
    -ms-border-radius: 20.0025px;
    -o-border-radius: 20.0025px;
}


.userMain {
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding: 39.9975px 33.9975px 15.9975px 32.0025px;
    width: 100%;
    border-bottom: 2.0025px solid #EAB783;
}

.infoRight {
    position: absolute;
    top: 20.0025px;
    right: 33.9975px;
    width: 135.9975px !important;
    height: 135.9975px !important;
    border: none !important;
}

.userMain>img {
    margin-right: 30px;
    width: 92.0025px;
    height: 92.0025px;
    border-radius: 50%;
    border: 2.0025px solid #fff;
}

.userMain>div {
    display: flex;
    flex-direction: column;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 32.0025px;
    color: #FFFFFF;
}

.userMain>div>img {
    margin: 8.0025px 0;
    width: 117.9975px;
    height: 33.9975px;
}

.infoLine {
    display: flex;
    align-items: center;
    margin: 30px 0px 30px 0px;



}

.infoLine>div {
    margin-right: 20.0025px;
    position: relative;
    width: 340px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 5.0025px;
}

.infoLine>div>div:first-child {
    width: 80.0025px;
    height: 14px;
    background: linear-gradient(90deg, #FE9528, #FCCD61);
    border-radius: 5.0025px;
}

.infoLine>span {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20.0025px;
    color: rgba(255, 255, 255, .5);
}

.infoBox {
    box-sizing: border-box;

    padding: 33.9975px 45.9975px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.infoBox>div {
    position: relative;
    display: flex;
    flex-direction: column;

}


.infoBox>div>span:not(:last-child) {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 27.9975px;
    color: #FDFEFF;
    background: linear-gradient(-90deg, #EAB883 0%, #F2E6CC 50%, #EAB783 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.infoBox>div>span:nth-child(2) {
    margin: 20.0025px 0 20.0025px;
}

/* .infoBox>div:nth-child(3)::after, */
.infoBox>div:nth-child(2)::after,
.infoBox>div:nth-child(2)::before {
    position: absolute;
    top: 18px;
    display: inline-block;
    content: '';
    width: 2.0025px;
    height: 74.0025px;
    background: linear-gradient(-90deg, #EAB883, #F2E6CC, #EAB783);
}

.infoBox>div:nth-child(2)::before {
    left: -48px;
}


/* .infoBox>div:nth-child(3)::after, */
.infoBox>div:nth-child(2)::after {
    right: -48px;
}

.infoBox>div>span:last-child {
    font-family: Source Han Sans CN !important;
    font-weight: 400;
    font-size: 20.0025px !important;
    color: #FDFEFF !important;
}

.detailBtn::after {
    margin: 0 8.0025px 0 6px;
    display: inline-block;
    content: '';
    width: 2.0025px;
    height: 14.0025px;
    background: #FFFFFF;
}


.ruleTip {
    position: absolute;
    top: 356.0025px;
    right: 98.0025px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20.0025px;
    color: #FFFFFF;
    line-height: 27.9975px;
}

.rulesBox {
    box-sizing: border-box;
    padding: 39.9975px 0 20.0025px;
    width: 100%;
    border-top: 3.9975px dashed #E19D93;
    font-weight: bold;
    font-size: 32.0025px;
    color: #8E0B2B;
    line-height: 42px;
    background: linear-gradient(0deg, #FEEBC2 0%, #F6D08E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.van-overlay {
    z-index: 999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}


.waitImg {
    margin: 50.0025px 69.9975px;
    display: block;
    width: 435px;
    height: 248.0025px;
}


.shareBtnImg {

    width: 260.0025px;
    height: 84px;
}


.shareBtnBox {
    box-sizing: border-box;
    padding: 0 24px;
    margin: 18px auto -24px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;

}



.shareBtnBox>img:first-child {
    animation: round_animate 1s linear infinite;
    -webkit-animation: round_animate 1s linear infinite;
}

.shareBtnBox>img:last-child {
    animation: round_animate2 1s linear infinite;
    -webkit-animation: round_animate2 1s linear infinite;
}


@keyframes round_animate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    50% {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes round_animate2 {
    0% {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    100% {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
    }
}


.vipItem {
    position: absolute;
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 180px;
    color: #fff;
    font-size: 20.0025px;
    font-weight: 400 !important;
    height: 100%;

}

.vipItem>span:first-child {
    position: relative;
    top: -9.9975px;
}

.vipItem>span:last-child {
    position: relative;
    bottom: -9.9975px;
}



.vipItem1 {

    border-right: 3.9975px solid rgb(6, 90, 247);
    width: 25%;
    z-index: 8;

    /* background: linear-gradient(-10deg, #B8C0D4 0%, #FFFFFF 100%); */
}

.vipItem2 {
    border-right: 3.9975px solid rgb(6, 90, 247);
    width: 50%;
    /* background: linear-gradient(-35deg, #E79A48 0%, #F4BD87 50%, #F7DEC4 75.5615234375%, #EAB783 100%); */
    z-index: 7;

}

.vipItem3 {
    width: 100%;
    /* background: linear-gradient(-10deg, #C48FED 0%, #E7ECFC 100%); */
    z-index: 6;

}



.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>